import {fabric} from 'fabric';
import colorParse from 'color-parse';
import PubSub from "pubsub-js";
import {CLICK_THUMB_EVENT} from "./event-types"


const THUMB_CONFIG = {
    width: 800,
    height: 600,
    id: "canvas",
    rows: 3,
    cols: 4,
    labelSize: 14,
    labelPadding: 4,
    strokeWidth: 4
}

// 绘制标题
const drawTitle = function (point, text, color, size, padding) {
    const pColor = colorParse(color || '#ffffff');
    return new fabric.Text(text, {
        padding: padding,
        fontFamily: 'Comic Sans',
        left: point.x,
        top: point.y,
        fontSize: size,
        backgroundColor: pColor,
        fill: '#ffffff'
    })

}

// 绘制坐标框
const drawEnd = function (startPoint, endPoint, color, strokeWidth) {
    const pColor = colorParse(color || '#ffffff');
    pColor.values.push('0.5');
    let {x, y} = endPoint;
    let lx = Math.min(x, startPoint.x);
    let ly = Math.min(y, startPoint.y);
    return new fabric.Rect({
        left: lx,
        top: ly,
        fill: color ? `rgba(${pColor.values.join(',')})` : 'rgba(0,0,0,0.3)',
        hasRotatingPoint: false,
        width: Math.abs(x - startPoint.x),
        height: Math.abs(y - startPoint.y),
        strokeWidth: strokeWidth,
        stroke: color || '#669ce1'
    });
}

export function thumbs(config, images) {
    config = Object.assign(THUMB_CONFIG, config)
    const canvasW = config.width
    const canvasH = config.height
    const elementW = canvasW / config.cols
    const elementH = canvasH / config.rows

    let canvas = new fabric.Canvas(config.id, {
        backgroundColor: "pink",
        uniScaleTransform: true, // 拉伸不固定比例
        width: canvasW,
        height: canvasH
    });

    images.forEach((image, index) => {
        fabric.Image.fromURL(image.src, function (oImg) {
            let scaleX = elementW / oImg.get("width")
            let scaleY = elementH / oImg.get("height")
            let scale = Math.min(scaleX, scaleY) * 0.85

            let col = index % config.cols
            let row = Math.floor(index / config.cols)

            let picW = oImg.get("width") * scale
            let picH = oImg.get("height") * scale
            let left = col * elementW + (elementW - picW) / 2
            let top = row * elementH + (elementH - picH) / 2
            let labelSize = config.labelSize / scale
            let labelPadding = config.labelPadding / scale
            let strokeWidth = config.strokeWidth / scale

            oImg.set({left: left, top: top})
            let groups = [oImg]

            let annotations = image.annotationList
            if (annotations.length > 0) {
                annotations.forEach((annotation) => {
                    let box = drawEnd({x: left + annotation.x1, y: top + annotation.y1},
                        {x: left + annotation.x2, y: top + annotation.y2},
                        annotation.labelColor,
                        strokeWidth
                    )
                    groups.push(box)
                    let title = drawTitle({x: left + annotation.x1 + strokeWidth, y: top + annotation.y1 + strokeWidth},
                        annotation.labelName,
                        annotation.labelColor,
                        labelSize,
                        labelPadding
                    )
                    groups.push(title);
                })
            }


            let group = new fabric.Group(groups, {scaleX: scale, scaleY: scale, selectable: false, sourceData: image})
            canvas.add(group)
        });
    })

    // 点击事件监听
    canvas.on('mouse:down', function (e) {
        PubSub.publish(CLICK_THUMB_EVENT, {data: e.target.sourceData})
    })

}